<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法3：v-bind属性绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1:html插值</h1>
        <h3>可以动态地渲染DOM节点,常用来处理开发者不可预知的或难以控制的DOM结构
            但是注意：在网页上动态渲染html是比较危险的，容易造成漏洞被黑客攻击
        </h3>
        <span v-html:="vh"></span>
        <h1>知识点2：v-pre指令</h1>
        <h3>1.它可以使代码所在的节点跳过编译
            2.可以利用它跳过没有指令语法的节点，可以加快速度
        </h3>
        <p>例子</p>
        <span>我的工资是{{price}}元</span><br>
        <span v-pre>我的工资是{{price}}元,咋没有了？没有编译</span>
        <h1>知识点3：v-bind属性绑定</h1>
        <h3>1.文本的插值表达式不能在html属性中使用，如果我们要动态的调整属性，就需要使用v-bind指令</h3>
        <p>没有使用v-bind</p>
        <p title="我是属性">我没有进行属性绑定</p>
        <p v-bind:title="title">我进行属性绑定</p>
        <h3>2.v-bind:可以省略为 :</h3>
        <p :title="title">我进行了省略,怎么样，简单吧</p>
        <h3>3.属性也可以绑定变量，表达式和执行函数，注意：最后的结果要符合属性的自身要求</h3>
        <p>例子1：绑定变量和表达式</p>
        <button :disabled="1+1==9">点击有奖</button>
        <p>例子2：图片的动态绑定</p>
        <img :src="src" alt="">
        <h3>课堂实例：通过改变type值，实现文本框，单选框和复选框的切换</h3>
        <input type="text">
        <input type="radio">
        <input type="checkbox">
        <p>代码实现</p>
        <input :type="type">
        <button @click="type='text'">文本框</button>
        <button @click="type='radio'">单选框</button>
        <button @click="type='checkbox'">复选框</button>
        <h3>课堂小练习：通过动态绑定改变属性，实现字体大小和颜色的改变，参考上面例子。用按钮实现</h3>
        <span :style="{color:color,fontSize:size+'px'}">我是一行等待你改变的文字</span>
        <button @click="color='green'">改成绿色</button>
        <button @click="color='yellow'">改成黄色</button>
        <button @click="color='red'">改成红色</button>
        <button @click="color='blue'">改成蓝色</button>
        <button @click="size++">字体变大</button>
        <button @click="size--">字体变小</button>
    </div>
</body>

</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                vh:"<span style='color:red'> 我是动态生成的html代码</span>",
                price:10000000,
                title:'都说了别碰我，你还要碰我！！！！！！！！！！！！！！！',
                src:'./两个兄弟.png',
                type:'text',
                color:'color',
                size:16
            }
        },
    }).mount("#app")
</script>